<template>
   <div class="home_services home_kind">
      <div class="services_title kind_title">Specialist Services</div>
      <div class="services_class kind_class">
        <div class="class_box" v-for="obj in specialistServices" :key="obj.id">
          <div class="class_img">
            <img :src="obj.img" alt="" />
          </div>
          <div class="class_text">
            {{ obj.title }}
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      specialistServices: [
        {
          id: 1,
          img: require("../../static/images/home/Tooth.png"),
          title: "Tooth",
        },
        {
          id: 2,
          img: require("../../static/images/home/Eye.png"),
          title: "Eye",
        },
        {
          id: 3,
          img: require("../../static/images/home/Lungs.png"),
          title: "Lungs",
        },
        {
          id: 4,
          img: require("../../static/images/home/Intestines.png"),
          title: "Intestines",
        },
        {
          id: 5,
          img: require("../../static/images/home/Kidney.png"),
          title: "Kidney",
        },
        {
          id: 6,
          img: require("../../static/images/home/Ear.png"),
          title: "Ear",
        },
        {
          id: 7,
          img: require("../../static/images/home/Heart.png"),
          title: "Heart",
        },
        {
          id: 8,
          img: require("../../static/images/home/Blood.png"),
          title: "Blood",
        },
      ],
    }
  },
  components: { },
  methods: { },
}
</script>

<style lang='scss' scoped>
.home_kind {
  margin-top: 48rpx;

  .kind_title {
    color: rgb(23, 23, 37);
    font-family: Plus Jakarta Sans;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 52rpx;
    letter-spacing: 0.004999999888241291%;
    text-align: left;
  }

  .kind_class {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .class_box {
      margin: 32rpx 0;

      .class_img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 132rpx;
        height: 132rpx;
        background: rgb(236, 234, 255);
        border-radius: 20rpx;

        img {
          width: 64rpx;
          height: 64rpx;
        }
      }

      .class_text {
        margin-top: 16rpx;
        color: rgb(102, 112, 122);
        font-family: Plus Jakarta Sans;
        font-size: 24rpx;
        font-weight: 500;
        // line-height: 40rpx;
        letter-spacing: 0.004999999888241291%;
        text-align: center;
      }
    }
  }
}

</style>
